<html>
  <head>
    <script>
      const loadImage = async (src) => {
	return new Promise((resolve, reject) => {
	  let img = new Image()
	  img.onload = () => resolve(img);
	  img.src = src; 
	})
      };
    </script>

    <script type="module">
			import { Controller } from "../../src/image-target/controller.js";

      const process = async() => {
	const queryImage = await loadImage('./assets/card-example/test-card.png');
	
	const controller = new Controller({inputWidth: queryImage.width, inputHeight: queryImage.height});
	const {dimensions, matchingDataList, imageListList} = await controller.addImageTargets('./assets/card-example/card.mind');

	const {featurePoints} = await controller.detect(queryImage);
	console.log("feature", featurePoints);

	const {modelViewTransform} = await controller.match(featurePoints, 0);
	console.log("transform", modelViewTransform);

	const trackResult = await controller.track(queryImage, modelViewTransform, 0);
	console.log("track", trackResult);

	const newModelViewTransform = await controller.trackUpdate(modelViewTransform, trackResult);
	console.log("track transform", newModelViewTransform);
      }
      process();
    </script>
  </head>
  <body>
  </body>
</html>
